<script setup lang="ts">
// 引入标题
import IndexTitle from "./indexTitle.vue"
// 引入监控数据接口
import { getMonitorSituation } from "@/api/index"
// 引入vue
import { ref } from "vue"

// 定义数据类型
interface dataType {
    equipmentNum: number,
    floor: string,
    handclapNum: number,
    img: string,
    normalNum: number
}

// 定义监控情况数据
const monitorSituationData = ref<dataType[]>([])

// 发送请求
getMonitorSituation().then(res => {
    // console.log(res);
    // 获取数据
    const result = res.data.data.result[0]
    // 赋值
    monitorSituationData.value = result
    // console.log(222, result);

})

</script>

<template>
    <!-- 左上内容 -->
    <div class="left-top_container">
        <!-- 标题 -->
        <index-title title="监控情况" :show="true"></index-title>

        <!-- 主要内容 -->
        <div class="left-top_centent">
            <!-- 渲染数据 -->
            <div class="box" v-for="item in monitorSituationData" :key="item.floor">
                <div class="box-img">
                    <img :src="item.img" alt="">
                </div>
                <div class="box_right">
                    <div>
                        <p>{{ item.floor }}</p>
                        <p>
                            设备数量：<span class="cyan">{{ item.equipmentNum }}</span>
                        </p>
                    </div>
                    <div>
                        <p>
                            正常数量：<span class="cyan">{{ item.normalNum }}</span>
                        </p>
                        <p>
                            故障数量: <span class="copper">{{ item.handclapNum }}</span>
                        </p>
                    </div>
                </div>
            </div>
            <!--         
            <div class="box">   
                <div class="box-img">
                    <img src="../../../assets/layout/pageBg.png" alt="">
                </div>
                <div class="box_right">
                    <div>
                        <p>一号楼</p>
                        <p>
                            设备数量：<span class="cyan">130</span>
                        </p>
                    </div>
                    <div>
                        <p>
                            正常数量：<span class="cyan">130</span>
                        </p>
                        <p>
                            故障数量: <span class="copper">66</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="../../../assets/layout/pageBg.png" alt="">
                </div>
                <div class="box_right">
                    <div>
                        <p>一号楼</p>
                        <p>
                            设备数量：<span class="cyan">130</span>
                        </p>
                    </div>
                    <div>
                        <p>
                            正常数量：<span class="cyan">130</span>
                        </p>
                        <p>
                            故障数量: <span class="copper">66</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="../../../assets/layout/pageBg.png" alt="">
                </div>
                <div class="box_right">
                    <div>
                        <p>一号楼</p>
                        <p>
                            设备数量：<span class="cyan">130</span>
                        </p>
                    </div>
                    <div>
                        <p>
                            正常数量：<span class="cyan">130</span>
                        </p>
                        <p>
                            故障数量: <span class="copper">66</span>
                        </p>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<style scoped lang="scss">
/* 大盒子 */
.left-top_container {
    width: 100%;
    height: 45%;
    overflow: hidden;

    // 主要内容
    .left-top_centent {
        width: 100%;
        height: calc(100% - 40px);
        background: #092c75;
        // color: #fff;
        font-size: 13px;
        // overflow: auto;

        .box {
            width: 100%;
            height: 80px;
            display: flex;

            justify-content: space-evenly;
            align-items: center;

            .box-img {
                flex: 1;
                text-align: center;

                img {
                    width: 80px;
                    height: 50px;
                }
            }

            .box_right {
                flex: 2;
                height: 100%;
                line-height: 35px;

                text-align: center;
                padding: 0 10px;
                box-sizing: border-box;
                color: #fcfcfc;

                >div {
                    display: flex;

                    p {
                        padding: 0;
                        margin: 0;
                        flex: 1;

                        .cyan {
                            color: #59adb1;
                        }

                        .copper {
                            color: #8b6348;
                        }
                    }

                    p:nth-child(1) {
                        flex: 1;

                    }
                }
            }
        }
    }
}
</style>